<template>
  <div class="box">
    <div class="header">
      <div class="header-left"></div>
      <div class="header-middle">
        <h1 class="header-h1">新型冠状肺炎实时监测</h1>
      </div>
      <div class="header-right">
        <span class="header-span" >{{time}}</span>
      </div>
    </div>
    <div class="bodys">
      <div class="bodys-left">
        <div class="bodys-left-top">
          <dv-border-box-7 class="pd" :color="['transparent', '#02a6b5']">
            <LeftTop></LeftTop>
          </dv-border-box-7>
        </div>
        <div class="bodys-left-middle">
          <dv-border-box-7 class="pd" :color="['transparent', '#02a6b5']">
            <LeftMiddle></LeftMiddle>
          </dv-border-box-7>
        </div>
        <div class="bodys-left-buttom">
          <dv-border-box-7 class="pd" :color="['transparent', '#02a6b5']">
            <LeftButtom></LeftButtom>
          </dv-border-box-7>
        </div>
      </div>
      <div class="bodys-middle">
        <div class="bodys-middle-top"> 
            <MiddleTop></MiddleTop> 
        </div>
        <div class="bodys-middle-buttom">
          <MiddleButton ></MiddleButton>
        </div>
      </div>
      <div class="bodys-right">
        <div class="bodys-right-top">
          <dv-border-box-7 class="pd" :color="['transparent', '#02a6b5']">
            <RightTop></RightTop>
          </dv-border-box-7>
        </div>
        <div class="bodys-right-middle">
          <dv-border-box-7 class="pd" :color="['transparent', '#02a6b5']">
            <Rightmiddle></Rightmiddle>
          </dv-border-box-7>
        </div>
        <div class="bodys-right-buttom">
          <dv-border-box-7 class="pd" :color="['transparent', '#02a6b5']">
            <RightButtom></RightButtom>
          </dv-border-box-7>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftTop from "../components/LeftTop.vue";
import LeftMiddle from "../components/LeftMiddle.vue";
import LeftButtom from "../components/LeftButtom.vue";
import RightTop from "../components/RightTop.vue";
import Rightmiddle from "../components/Rightmiddle.vue"; 
import RightButtom from "../components/RightButtom.vue";
import MiddleTop from "../components/MiddleTop.vue"; 
import MiddleButton from "../components/MiddleButton.vue";
export default {
  name: "Home",
  components: {
    LeftTop,
    LeftMiddle,
    LeftButtom,
    RightTop,
    Rightmiddle,
    RightButtom,
    MiddleTop,
    MiddleButton
  },
  data() {
    return {
      time: "",
    };
  },
  created () {
    this.setTime();
  },
  methods: {
    getNowTime() {
      const date = new Date();
      const year = date.getFullYear(); //   年
      const month = date.getMonth() + 1; //  月
      const day = date.getDate(); // 日
      const hour = date.getHours(); // 小时
      const minute = date.getMinutes(); //  分
      const second = date.getSeconds(); //  秒
      return `${year}年${month < 10 ? "0" + month : month}月${
        day < 10 ? "0" + day : day
      }-${hour < 10 ? "0" + hour : hour}时${
        minute < 10 ? "0" + minute : minute
      }分${second < 10 ? "0" + second : second}秒`;
    },
    setTime() {
      setInterval(() => {
        this.time = this.getNowTime();
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.box {
  width: 100%;
  height: 100%;
  background-image: url(../../src/assets/img/bg.a6333996.jpg);
  background-size: 100% 100%;
  box-sizing: border-box;
  // display: flex;
  // flex-direction: column;
}
// 头部
.header {
  width: 100%;
  height: 10%;
  background-image: url(../../src/assets/img/head_bg.eeff3da5.png);
  background-size: 100% 100%;
  display: flex;
  // 头部左
  .header-left {
    width: 30%;
  }
  // 头部中
  .header-middle {
    width: 40%;
    .header-h1 {
      color: white;
      text-align: center;
      line-height: 50px;
      font-size: 30px;
    }
  }
  // 头部右
  .header-right {
    width: 30%;
    height: 100%; 
    text-align: right; 
    padding-right:20px;
   
    .header-span { 
      line-height: 50px; 
        color: rgb(167, 193, 240);
      font-size: 14px;
    }
  }
}
// 内容
.bodys {
  width: 100%;
  height: 90%;
  display: flex;
  // 左边内容
  .bodys-left {
    width: 30%;
    height: 100%;
    // 左边内容的上半部分
    .bodys-left-top {
      width: 100%;
      height: 33%;
    }
    // 左边内容的中间部分
    .bodys-left-middle {
      width: 100%;
      height: 33%;
      margin: 3px 0;
    }
    // 左边内容的下半部分
    .bodys-left-buttom {
      width: 100%;
      height: 33%; 
    }
  }
  // 中间内容
  .bodys-middle {
    width: 40%;
    height: 100%; 
    .bodys-middle-top {
      width: 100%;
      height: 30%;  
    }
    .bodys-middle-buttom {
      width: 100%;
      height: 70%; 
    }
  }
  // 右边部分
  .bodys-right {
    width: 30%;
    height: 100%;
    .bodys-right-top {
      width: 100%;
      height: 33%;
    }
    .bodys-right-middle {
      width: 100%;
      height: 33%;
      margin: 3px 0;
    }
    .bodys-right-buttom {
      width: 100%;
      height: 33%;
    }
  }
}
.pd {
  padding: 5px;
  box-sizing: border-box;
}
</style>